নিচে যে সুন্দর একটি এইচটিএমএল টেবিল দেখতে পাচ্ছেন তা সিএসএস দিয়ে স্টাইল করা হয়েছে।
এই অধ্যায়ে আমরা ধাপে ধাপে এধরনের টেবিল তৈরি করা শিখবোঃ
| খেলোয়াড়ের নাম | দলীয় অবস্থান | দেশ |
|---|---|---|
| মাশরাফি বিন মুর্তজা | ক্যাপ্টেন এবং বোলার | বাংলাদেশ |
| সাকিব আল হাসান | অলরাউন্ডার | বাংলাদেশ |
| ডু প্লেসিস | ক্যাপ্টেন এবং ব্যাটসম্যান | দক্ষিন আফ্রিকা |
| বিরাট কোহলি | ব্যাটসম্যান | ভারত |
একনজরে সিএসএসের টেবিল প্রোপার্টিসমূহ
| প্রোপার্টি | বর্ণনা |
|---|---|
border | একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো বর্ডার প্রোপার্টি সেট করার জন্য একটি শর্টকাট প্রোপার্টি। |
border-collapse | টেবিলের বর্ডার কলাপ্স হবে কিনা তা নির্ধারণ করে। |
border-spacing | পাশাপাশি দুটি সেলের বর্ডারের দূরত্ব নির্ধারণ করে। |
caption-side | টেবিল ক্যাপশনের অবস্থান নির্ধারণ করে। |
empty-cells | একটি টেবিলের মধ্যে খালি সেল এর বর্ডার এবং ব্যাকগ্রাউন্ড প্রদর্শিত হবে কিনা তা নির্ধারণ করে। |
table-layout | একটি টেবিলের লেআউট নির্ধারণ করে। |
টেবিলে বর্ডার সেট
< table> এর চারপাশে বর্ডার সেট করার জন্য সিএসএস border প্রোপার্টি ব্যবহার করতে হয়।
kt_satt_skill_example_id=695
উপরের উদাহরণে লক্ষ্য করলে দেখবেন, শুধুমাত্র < table> এর চারপাশে বর্ডার আছে। কিন্তু < th> এবং < td> এলিমেন্টে কোনো বর্ডার নাই।
< table>, < th> এবং < td> এলিমেন্টে বর্ডার দিতে হলে এদের প্রত্যেকটিতে পৃথকভাবে border প্রোপার্টি সেট করতে হবে।
kt_satt_skill_example_id=701
উপরের উদাহরণে লক্ষ্য করলে দেখবেন, টেবিলের মধ্যে ডাবল বর্ডার দেখা যাচ্ছে। কারণ টেবিলের বর্ডারসমূহ একটি একক বর্ডারে কলাপ্স হবে কিনা অর্থাৎ দুটি বর্ডার এক হয়ে যাবে কিনা তা নির্ধারণ করার জন্য kt_satt_skill_example_id=702 উপরের উদাহরনে টেবিলের ডিফল্টভাবে নিচের উদাহরনে kt_satt_skill_example_id=703 বিঃদ্রঃ এছাড়াও আপনি চাইলে কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করতে পারবেন। টেবিলের প্রস্থ এবং উচ্চতা নির্ধারণ করার জন্য সিএসএস নিচের উদাহরনে kt_satt_skill_example_id=707 টেবিলের বর্ডার এবং কন্টেন্ট এর মধ্যে স্পেস নিয়ন্ত্রন করার জন্য টেবিলের সারিগুলোকে অনুভূমিক ভাবে বিভাজন করার জন্য kt_satt_skill_example_id=714 নিচের উদাহরণে kt_satt_skill_example_id=720 টেবিলকে জেব্রা স্টাইল করতে হলে kt_satt_skill_example_id=738 টেবিলের সারির উপর মাউস নেওয়ার পরে সারিকে হাইলাইট করার জন্য kt_satt_skill_example_id=732 টেবিলকে রেস্পন্সিভ করার জন্য kt_satt_skill_example_id=736 বিঃদ্রঃ রেসপন্সিভনেস বুঝার জন্য ব্রাউজারের উইন্ডো রিসাইজ করুন। আরও দেখুন...,
এবং তিনটি এলিমেন্টের জন্য পৃথকভাবে বর্ডার সেট করা হয়েছে। টেবিলের বর্ডার কলাপ্স
border-collapse প্রোপার্টিটি ব্যবহার করা হয়।border-collapse প্রোপার্টি ব্যবহার করায় দুটি বর্ডার একত্রিত হয়ে একটি বর্ডারে পরিনত হয়েছে।টেবিলের টেক্সট এলাইনমেন্ট সেট
< th> এবং < td> এলিমেন্টের কন্টেন্টসমূহ অনুভূমিকভাবে সেন্টারে, বামে নাকি ডানে দেখাবে তা সেট করার জন্য সিএসএস text-align প্রোপার্টি ব্যবহার করা হয়।< th> এলিমেন্টেের কন্টেন্টসমূহ সেন্টারে থাকে এবং < td> এলিমেন্টের কন্টেন্টসমূহ বামে থাকে।< th> এলিমেন্টের কন্টেন্টসমূহের এলাইনমেন্ট left নির্ধারণ করা হয়েছে।< th> এবং < td> এলিমেন্টের কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করার জন্য vertical-align প্রোপার্টিটি ব্যবহার করুন। এর সম্ভাব্য ভ্যালুগুলো হলোঃ top এবং bottom।টেবিলের প্রস্থ এবং উচ্চতা সেট
width এবং height প্রোপার্টি ব্যাবহার করা হয়।< table> এর প্রস্থ সেট করা হয়েছে 100% এবং < th> এলিমেন্টের height সেট করা হয়েছে 50px।টেবিলে প্যাডিং যুক্তকরণ
< th> এবং < td> এলিমেন্টে padding প্রোপার্টি ব্যবহার করা হয়।kt_satt_skill_example_id=711
সারিকে অনুভূমিকভাবে বিভাজন
< th> এবং < td> এলিমেন্টে border-bottom প্রোপার্টি যুক্ত করা হয়।টেবিলের সারিতে পৃথকভাবে কালার সেট
< th> এলিমেন্টের ব্যাকগ্রাউন্ড কালার এবং টেক্সট কালার নির্ধারণ করা হয়েছেঃ
টেবিলে জেব্রা স্টাইল যুক্তকরণnth-child() সিলেক্টর ব্যবহার করে টেবিলের জোড় অথবা বিজোড় সারিতে background-color প্রোপার্টি যুক্ত করতে হবে।টেবিলে হোভার ইফেক্ট যুক্তকরণ
< tr> এলিমেন্টে :hover সিলেক্টর ব্যবহার করে সিএসএস প্রয়োগ করুন।রেসপন্সিভ টেবিল তৈরি করা
এলিমেন্টকে
overflow-x: auto প্রোপার্টি ব্যবহার করুন।Promotion
Download Our Mobile Apps
